<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4" style="margin-right: 60px">
        <el-col :span="24" style="margin-bottom: 20px;border: 1px solid #DCDFE6;" v-for="(item,index) in queryData" v-if="item.pid==null">
          <!--<div>
            <div>
              <el-select value="" :placeholder="item.cate_name" style="width: 100%">
                <el-option :value="item.cate_name" :label="item.cate_name"></el-option>
              </el-select>
            </div>
            <div v-if="item.cate_name=='学员'">
              <div  v-for="items in queryData" v-if="items.pid!=null&&items.pid=='1'" class="text item">
                {{items.cate_name}}
              </div>
            </div>
            <div v-if="item.cate_name=='课程'">
              <div  v-for="items in queryData" v-if="items.pid!=null&&items.pid=='2'" class="text item">
                {{items.cate_name}}
              </div>
            </div>
            <div v-if="item.cate_name=='财务'">
              <div  v-for="items in queryData" v-if="items.pid!=null&&items.pid=='3'" class="text item">
                {{items.cate_name}}
              </div>
            </div>
          </div>-->
          <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i v-if="item.cate_name=='学员'" class="el-icon-user"></i>
                <i v-if="item.cate_name=='课程'" class="el-icon-notebook-2"></i>
                <i v-if="item.cate_name=='财务'" class="el-icon-money"></i>
                <span>{{item.cate_name}}</span>
              </template>
              <el-menu-item-group v-if="item.cate_name=='学员'">
                <el-menu-item style="padding: 0" index="1-1" v-for="items in queryData" v-if="items.pid!=null&&items.pid=='1'" @click="StudentClick(items.pid)">
                  {{items.cate_name}}
                  <el-button type="danger" style="float: right;height:100%" @click="delType(items.unid)" v-if="items.institution_id!=0">删除</el-button>
                </el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group v-if="item.cate_name=='课程'">
                <el-menu-item style="padding: 0" index="1-2" v-for="items in queryData" v-if="items.pid!=null&&items.pid=='2'" @click="CulumClick(items.pid)">
                  {{items.cate_name}}
                  <el-button type="danger" style="float: right;height:100%" @click="delType(items.unid)" v-if="items.institution_id!=0">删除</el-button>
                </el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group v-if="item.cate_name=='财务'">
                <el-menu-item style="padding: 0" index="1-3" v-for="items in queryData" v-if="items.pid!=null&&items.pid=='3'" @click="FinanceClick(items.pid)">
                  {{items.cate_name}}
                  <el-button type="danger" style="float: right;height:100%" @click="delType(items.unid)" v-if="items.institution_id!=0">删除</el-button>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-col>
      <el-col :span="18">
        <el-button type="primary" style="margin-bottom: 20px" @click="addDig1 = true">新增</el-button>
        <el-button type="primary" style="margin-bottom: 20px" @click="addDig4 = true">新增类目</el-button>
        <div style="margin-bottom: 20px;">
          <!--<el-button>取消选择</el-button>-->
          <el-button type="danger" @click="delChecked">删除选中</el-button>
        </div>
        <el-dialog v-loading="loading" title="新增数据字典项目" :visible.sync="addDig1" width="768px">
          <el-form ref="addData" :model="addData" :rules="rules" label-width="68px">
            <el-row style="padding: 0;margin: 0">
              <el-col :span="8">
                <el-form-item label="项目名称" label-width="90px" prop="project_name">
                  <el-input v-model="addData.project_name" placeholder="请输入项目名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排序" prop="sort">
                  <el-input v-model="addData.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构id">
                  <el-input v-model="addData.institution_id" placeholder="请输入机构id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="栏目id" prop="cate_id">
                  <el-select v-model="addData.cate_id" value="" placeholder="请选择栏目id">
                    <el-option :label="item.cate_name" :value="item.pid" v-for="item in queryData" v-if="item.pid!=null"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="描述" prop="desc">
                  <el-input v-model="addData.desc" placeholder="请输入描述"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="附属如课程编号开头等" label-width="165px" prop="adjunct">
                  <el-input v-model="addData.adjunct" placeholder="请输入附属如课程编号开头"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启" prop="is_open" label-width="90px">
                  <el-select v-model="addData.is_open" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启月份" label-width="110px" prop="is_month">
                  <el-select v-model="addData.is_month" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启年份" label-width="110px" prop="is_year">
                  <el-select v-model="addData.is_year" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" style="text-align: right">
                <el-button type="primary" @click="addDictionariesData('addData')">提交</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
        <el-dialog v-loading="loading" title="新增类目" :visible.sync="addDig4" width="300px">
          <el-form ref="addType" :model="addType" :rules="rules2" label-width="80px">
            <el-form-item label="栏目名称" prop="cate_name">
              <el-input v-model="addType.cate_name" placeholder="请输入栏目名称"></el-input>
            </el-form-item>
            <el-form-item label="父类" prop="pid">
              <el-select v-model="addType.pid" placeholder="请选择父类">
                <el-option label="学院" :value="1"></el-option>
                <el-option label="课程" :value="2"></el-option>
                <el-option label="财务" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="addType.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="typeClick('addType')">提交</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-col :span="24" style="margin-bottom: 20px">
          <el-table v-loading="loading1" :data="tableData1" border style="width: 100%" @select="onTableSelect" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="39px"></el-table-column>
            <el-table-column fixed prop="unid" label="主键ID" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="project_name" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="institution_id" label="机构id" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed="right" label="操作" width="210">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="primary" size="mini">查看</el-button>
                <el-button @click="editClick(scope.row)" type="success" size="mini">编辑</el-button>
                <el-button @click="delClick(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <!--<el-col :span="24" style="margin-bottom: 20px">
          <el-table v-loading="loading2" :data="tableData2" border style="width: 100%">
            <el-table-column type="selection" width="39px"></el-table-column>
            <el-table-column fixed prop="unid" label="主键ID" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="project_name" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="institution_id" label="机构id" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed="right" label="操作" width="210">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="primary" size="mini">查看</el-button>
                <el-button @click="editClick(scope.row)" type="success" size="mini">编辑</el-button>
                <el-button @click="delClick(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" style="margin-bottom: 20px">
          <el-table v-loading="loading3" :data="tableData3" border style="width: 100%">
            <el-table-column type="selection" width="39px"></el-table-column>
            <el-table-column fixed prop="unid" label="主键ID" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="project_name" label="项目名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="institution_id" label="机构id" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed="right" label="操作" width="210">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="primary" size="mini">查看</el-button>
                <el-button @click="editClick(scope.row)" type="success" size="mini">编辑</el-button>
                <el-button @click="delClick(scope.row)" type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>-->
        <el-dialog title="查看" :visible.sync="addDig2" width="768px">
          <el-form ref="addData2" :model="addData2" label-width="68px">
            <el-row style="padding: 0;margin: 0">
              <el-col :span="8">
                <el-form-item label="项目名称">
                  <el-input v-model="addData2.project_name" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排序">
                  <el-input v-model="addData2.sort" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构id">
                  <el-input v-model="addData2.institution_id" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="栏目id">
                  <el-select v-model="addData2.cate_id" value="" placeholder="请选择" disabled>
                    <el-option :label="item.cate_name" :value="item.pid" v-for="item in queryData" v-if="item.pid!=null"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="描述">
                  <el-input v-model="addData2.desc" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="附属如课程编号开头等" label-width="155px">
                  <el-input v-model="addData2.adjunct" placeholder="请输入" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启">
                  <el-select v-model="addData2.is_open" value="" placeholder="请选择" disabled>
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启月份" label-width="100px">
                  <el-select v-model="addData2.is_month" value="" placeholder="请选择" disabled>
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启年份" label-width="100px">
                  <el-select v-model="addData2.is_year" value="" placeholder="请选择" disabled>
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="addDig3" width="768px">
          <el-form ref="addData2" :model="addData2" label-width="68px">
            <el-row style="padding: 0;margin: 0">
              <el-col :span="8">
                <el-form-item label="项目名称">
                  <el-input v-model="addData2.project_name" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="排序">
                  <el-input v-model="addData2.sort" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构id">
                  <el-input v-model="addData2.institution_id" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="栏目id">
                  <el-select v-model="addData2.cate_id" value="" placeholder="请选择">
                    <el-option :label="item.cate_name" :value="item.pid" v-for="item in queryData" v-if="item.pid!=null"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="描述">
                  <el-input v-model="addData2.desc" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="附属如课程编号开头等" label-width="155px">
                  <el-input v-model="addData2.adjunct" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启">
                  <el-select v-model="addData2.is_open" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启月份" label-width="100px">
                  <el-select v-model="addData2.is_month" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否开启年份" label-width="100px">
                  <el-select v-model="addData2.is_year" value="" placeholder="请选择">
                    <el-option label="开启" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" style="text-align: right">
                <el-button type="primary">提交</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryDictionaries,queryDictionariesData,addDictionariesData,delDictionariesData,addDictionariesType,delDictionariesType } from '@/api/studentRecruit.js'
  export default {
    name: 'index',
    data() {
      return {
        checkedData:null,
        loading: true,
        loading1: true,
        loading2: true,
        loading3: true,
        addDig1:false,
        addDig2:false,
        addDig3:false,
        addDig4:false,
        tableData1: [{

        }],
        tableData2: [{

        }],
        tableData3: [{

        }],
        //数据字典栏目
        queryData:[{

        }],
        addData:{
          project_name:null,
          sort:null,
          institution_id:null,
          cate_id:null,
          desc:null,
          adjunct:null,
          is_open:null,
          is_month:null,
          is_year:null,
          is_delete:0
        },
        addData2:{
          project_name:null,
          sort:null,
          institution_id:null,
          cate_id:null,
          desc:null,
          adjunct:null,
          is_open:null,
          is_month:null,
          is_year:null,
          is_delete:0
        },
        addType:{
          cate_name:null,
          pid:null,
          sort:null,
        },
        NumData:[],
        rules: {
          project_name: [
            { required: true, message: '请输入名称', trigger: 'blur,change' }
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur,change' }
          ],
          institution_id: [
            { required: true, message: '请输入机构id', trigger: 'blur,change' }
          ],
          cate_id: [
            { required: true, message: '请选择栏目id', trigger: 'blur,change' }
          ],
          desc: [
            { required: true, message: '请输入描述', trigger: 'blur,change' }
          ],
          adjunct: [
            { required: true, message: '请输入附属如课程编号开头', trigger: 'blur,change' }
          ],
          is_open: [
            { required: true, message: '请选择状态', trigger: 'blur,change' }
          ],
          is_month: [
            { required: true, message: '请选择状态', trigger: 'blur,change' }
          ],
          is_year: [
            { required: true, message: '请选择状态', trigger: 'blur,change' }
          ]
        },
        rules2: {
          cate_name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur,change' }
          ],
          pid: [
            { required: true, message: '请选择父类', trigger: 'blur,change' }
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur,change' }
          ]
        }
      }
    },
    methods: {
      //删除选中
      async delChecked(){
        for (let i = 0; i < this.checkedData.length; i++) {
          console.log('id',this.checkedData[i].unid)
          this.loading = true
          let delData = {
            unid:this.checkedData[i].unid
          }
          let resData = await delDictionariesData(delData)
          if(resData.code == 200){
            this.$message.success('删除'+(i+1)+'条成功!')
            this.queryDictionariesData()
            this.loading = false
          }else {
            this.$message.error('删除失败!')
          }
        }
      },
      /*表格全选方法*/
      async handleSelectionChange(val) {
        for (let i = 0; i < val.length; i++) {
          console.log('id',val.unid)
          this.loading = true
          let delData = {
            unid:val[i].unid
          }
          let resData = await delDictionariesData(delData)
          if(resData.code == 200){
            this.$message.success('删除'+(i+1)+'条成功!')
            this.queryDictionariesData()
            this.loading = false
          }else {
            this.$message.error('删除失败!')
          }
        }
      },
      //查看选中的数据
      onTableSelect(rows, row, index) {
        this.checkedData = rows
      },
      //添加字典数据
      addDictionariesData(addData) {
        this.$refs[addData].validate((valid) => {
          if (valid) {
            this.loading = true
            addDictionariesData(this.addData).then(resData => {
              if(resData.code ==200){
                this.$message.success('添加成功！')
                console.log('添加的数据',resData)
                this.queryDictionariesData()
                this.loading = false
              }
              this.addDig = false
            })
          } else {
            console.log(valid);
            return false;
          }
        });
      },
      //根据学员栏目查询
      async StudentClick(e) {
        console.log(e)
        let DataCate = {
          cate_id: e
        }
        let resData = await queryDictionariesData(DataCate)
        if (resData.code == 200){
          this.tableData1 = resData.data
          this.$message.success('查询成功！')
          console.log(resData.data)
        }else {
          this.$message.error('查询失败！')
        }
      },
      //根据课程栏目查询
      async CulumClick(e) {
        let DataCate = {
          cate_id: e
        }
        let resData = await queryDictionariesData(DataCate)
        if (resData.code == 200){
          this.tableData1 = resData.data
          this.$message.success('查询成功！')
          console.log(resData.data)
        }else {
          this.$message.error('查询失败！')
        }
      },
      //根据财务栏目查询
      async FinanceClick(e) {
        let DataCate = {
          cate_id: e
        }
        let resData = await queryDictionariesData(DataCate)
        if (resData.code == 200){
          this.tableData1 = resData.data
          this.$message.success('查询成功！')
          console.log(resData.data)
        }else {
          this.$message.error('查询失败！')
        }
      },
      typeClick(addType){
        this.$refs[addType].validate((valid) => {
          if (valid) {
            this.loading = true
            this.loading = true
            addDictionariesType(this.addType).then(resData => {
              if(resData.code == 200){
                this.$message.success('添加成功！')
                this.queryDictionariesData()
                this.loading = false
                console.log(resData)
                this.queryDictionaries()
              }
              this.addDig4 = false
            })
          } else {
            console.log(valid);
            return false;
          }
        });
      },
      handleClick(row) {
        this.addDig2 = true
        this.addData2 = row
        console.log(row.project_name);
      },
      editClick(row){
        this.addDig3 = true
        this.addData2 = row
      },
      //根据unid来删除字典数据
      async delClick(row){
        this.loading = true
        let DataProject={
          unid:row.unid
        }
        console.log(row.unid)
        console.log(typeof(row.unid))
        let resData = await delDictionariesData(DataProject)
        if(resData.code == 200){
          this.$message.success('删除成功！');
          this.queryDictionariesData()
          this.loading = false
        }else {
          this.$message.error('删除失败！');
        }
        console.log(resData)
      },
      //删除栏目
      async delType(row){
        let DataCate={
          unid:row
        }
        let resData = await delDictionariesType(DataCate)
        this.loading = true
        console.log(typeof(row))
        console.log(resData)
        if(resData.code == 200){
          this.$message.success('删除成功！');
          this.queryDictionaries()
          this.loading = false
        }else {
          this.$message.error('删除失败！');
        }
      },
      //获取数据字典类目
      async queryDictionaries() {
        this.loading = true
        let DataCate = {}
        let resData = await queryDictionaries(DataCate)
        if(resData.code == 200){
          this.queryData = resData.data
          this.loading = false
        }
      },
      //获取数据字典数据
      async queryDictionariesData() {
        this.loading1 = true
        /*this.loading2 = true
        this.loading3 = true*/
        let DataCate1 = {
          cate_id:1
        }
        /*let DataCate2 = {
          cate_id:2
        }
        let DataCate3 = {
          cate_id:3
        }*/
        let resData1 = await queryDictionariesData(DataCate1)
        /*let resData2 = await queryDictionariesData(DataCate2)
        let resData3 = await queryDictionariesData(DataCate3)*/
        if(resData1.code == 200){
          this.tableData1 = resData1.data
          this.loading1 = false
        }
        /*if(resData2.code == 200){
          this.tableData2 = resData2.data
          this.loading2 = false
        }
        if(resData3.code == 200){
          this.tableData3 = resData3.data
          this.loading3 = false
        }*/
      },
      //添加数据字典类目
      /*async addDictionariesData() {*/
        /*let DataCate = {
          project_name:'嘻嘻',
          sort:1,
          institution_id:0,
          cate_id:3,
          desc:'',
          adjunct:'',
          is_open:0,
          is_month:0,
          is_year:0,
          is_delete:0,
        }*/
       /* let resData = await addDictionariesData(this.addData)
        console.log(resData)
      },*/
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },created() {
      this.queryDictionaries()
      this.queryDictionariesData()
    }
  }
</script>

<style scoped>

  .text {
    font-size: 14px;
    text-align: center;
    color: blue;
  ;
  }

  .item {
    margin-top: 10px;
    margin-bottom: 18px;
  }
</style>
